<template>
    <div class="tag-wrapper">
        <el-tag v-for="tag in contentStore.mtvInfo[props.tagType]" :key="tag" @close="handleTagClose(tag)" :closable="contentStore.operate_mode !== 'view'" type="info">
            {{ tag }}
        </el-tag>
        <el-input
            v-if="inputVisible"
            v-model="inputValue"
            placeholder="回车提交"
            size="small"
            class="add-input"
            @keyup.enter="handleInputConfirm"
         />
        <el-button v-if="!inputVisible && contentStore.operate_mode !== 'view'"  size="small" @click="showInput">
        + 新增
        </el-button>
    </div>
</template>

<script setup>
    import { ref} from 'vue';
    import {useContentStore} from '@/store/modules/content.js';
    import { ElTag,ElButton,ElInput,ElNotification} from 'element-plus';
    const contentStore = useContentStore();
    const props = defineProps({
        tagType:String,
    })
    let inputVisible = ref(false);
    let inputValue = ref('');
    const handleInputConfirm = ()=>{
        //将新的标签载入对应数组中
        let newValue = inputValue.value.trim();
        if(newValue.length > 0){
            let targetArr = contentStore.mtvInfo[props.tagType];
            if(targetArr.indexOf(newValue) === -1)
                contentStore.mtvInfo[props.tagType].push(newValue);
            else
                ElNotification({
                    title: '提示',
                    message: '内容已存在',
                    type: 'error',
                });
        }else{
            ElNotification({
                title: '提示',
                message: '请输入内容',
                type: 'error',
            });
        }
        inputVisible.value = false;
    }
    //打开input框
    const showInput = ()=>{
        inputVisible.value = true;
    }
    //处理标签关闭
    const handleTagClose = (tag)=>{
        let thisArr = contentStore.mtvInfo[props.tagType];
        let index = thisArr.indexOf(tag);
        if(index >= 0){
            thisArr.splice(index,1);
        }
    }
</script>

<style scoped lang='scss'>
    .tag-wrapper{
        width:500px;
    }
    .el-tag{
        margin-right:10px;
    }
    .add-input{
        width:60px;
    }
</style>